<!DOCTYPE   html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
<base href="/managerSystem/view/">
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		background: rgba(255,255,255,0.6);
		width: 500px;
		height: 500px;
		margin: auto;
		border-radius: 10px;
	}
	.content1{
		width: 250px;
		margin: 20px auto;
	}
	#username{
		
		width: 245px;
		height: 30px;
	}
	#password{
		width: 245px;
		height: 30px;
	}
	.an_jian{
		width: 100px;
		margin: auto;
	}
	#an_jian{
		width: 100px;
		margin: auto;
	}
	#an_jian2{
		width: 100px;
		margin: 20px auto;
		background-color: #F2F2F2;
		border: 1px solid;
	}
	#an_jian2 > a{
		
		color: #000000;
		text-decoration: none;
		
		
	}
</style>
</head>
<body style="background: linear-gradient(#DCC3FF,#FFCEF6); height: 1100px;">
	<div><h1 align="center">修改信息</h1></div>
	<div class="content">
		<div class="content1">
		<form action="/managerSystem/updateUser.do" method="Post" id="app">
       	<input type="hidden" v-model='user.id' name="id">
        <label   for="username">用户名：</label><br>
        <input    type="text" v-model="user.username"  id="username"   name="username"   required><br>
        <label   for="password">密码：</label><br>
        <input    type="password"  v-model="user.password" id="password"   name="password"   required><br>
        <label   for="age">年龄：</label>
        <select   id="age"   name="age" v-model="user.age"  required >
               <option   value="18">18岁</option>
               <option   value="19">19岁</option>
               <option   value="20">20岁</option>
               <option   value="21">21岁</option>
               <option   value="22">22岁</option>
               <option   value="23">23岁</option>
               <option   value="24">24岁</option>
               <option   value="25">25岁</option>
               <option   value="26">26岁</option>
               <option   value="27">27岁</option>
               <option   value="29">29岁</option>
               <option   value="30">30岁</option>
               <option   value="31">31岁</option>
               <option   value="32">32岁</option>
               <option   value="33">33岁</option>
               <option   value="34">34岁</option>
               <option   value="35">35岁</option>
           </select><br>
           <label for="gender">性别：</label>
           <input v-if="user.gender=='男'" checked="checked" type="radio"   id="male"   name="gender"   value="男"   required>
           <input  v-else  type="radio"   id="male"   name="gender"   value="男"   required>
           <label for="male">男</label>
           <input v-if="user.gender=='女'" checked="checked"  type="radio"   id="female"   name="gender"   value="女"   required>
           <input  v-else  type="radio"   id="male"   name="gender"   value="女"   required>
           <label for="female">女</label><br>
           <label for="remark">备注：</label>
           <textarea id="remark" v-model="user.remake"  name="remark"   cols="30"   rows="10"></textarea>
           <div id="an_jian"><input type="submit"   value="完成"  class="an_jian"></div>
       		<div id="an_jian2" ><a href="users.html"><h3 align="center">返回</h2></a></div>
       </form>
       <script type="text/javascript">
           function parseUrlParams() {
                var url = window.location.href;
                var paramString = url.split('?')[1];
                var paramPairs = paramString.split('&');
                var params = {};
                paramPairs.reduce(function(params, pair) {
                    var parts = pair.split('=');
                    var key = parts[0];
                    var value = decodeURIComponent(parts[1] || '');
                    if (params[key]) {
                        params[key].push(value);
                    } else {
                        params[key] = [value];
                    }
                    return params;
                }, params);
                return params;
            }             
           let vue = new Vue({
                el: '#app',
                data:{
                    user:{
                        uname: '',
                        pwd: '',
                        age: '',
                        gender: '',
                        remake: '',
                        id: ''
                    }
                },
                created(){
                    params = parseUrlParams();
                    //url: 表示异步请求地址
                    axios.get('/managerSystem/selectUserById.do?id='+params.id[0]).then(
                        function(res_obj){
                            //使用获取的数据来给vue对象中的users数据赋值
                            vue.user = res_obj.data; 
                        }
                    ).catch(
                        function(error_obj){
                            alert("网络加载异常！！！");
                        }
                    )
                }
            });
    </script>
		</div>
	</div>
</body>
</html>